<template>
  <div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column fixed prop="storeName" label="使用人名称" width="150"> </el-table-column>
      <el-table-column prop="storeImg" label="登录账号" width="150"> </el-table-column>
      <el-table-column prop="storePosition" label="登录密码" width="150"> </el-table-column>
      <el-table-column prop="storePhone" label="所属门店" width="150"> </el-table-column>
      <el-table-column prop="storePhone" label="权限角色" width="150"> </el-table-column>

      <el-table-column label="状态" width="200">
        <template>
          <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
          <!-- <el-radio class="radio" v-model="templateSelection" :label="111"
            >111</el-radio>
            <el-radio class="radio" v-model="templateSelection" :label="111"
            >111</el-radio> -->
          <el-radio v-model="radio" label="1">启用</el-radio>
          <el-radio v-model="radio" label="2">禁用</el-radio>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作">
        <template>
          <el-button type="text" size="small" @click="editRouter">编辑</el-button>
          <el-button type="text" size="small" @click="open">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          storeName: '回龙观一店',
          storeImg: '王小虎',
          storePosition: '上海',
          storePhone: '12345678',
          storeOperator: '小明',
        },
        {
          storeName: '回龙观一店',
          storeImg: '王小虎',
          storePosition: '上海',
          storePhone: '12345678',
          storeOperator: '小明',
        },
        {
          storeName: '回龙观一店',
          storeImg: '王小虎',
          storePosition: '上海',
          storePhone: '12345678',
          storeOperator: '小明',
        },
      ],
      form: {
        resource: '',
      },
      radio: '1',
      //   当前选择的行的id
      templateSelection: '',
      //   当前选择的行的数据
      checkList: [],
    }
  },
  methods: {
    singleElection(row) {
      this.templateSelection = row.id
      this.checkList = this.tableData.filter((item) => item.id === row.id)
      console.log(`该行的编号为${row.id}`)
    },

    //编辑管理员
    editRouter() {
      this.$router.push('/EditAdmin')
      // console.log(this);
    },
    //删除管理员
    open() {
      this.$confirm('此操作将删除该管理员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
}
</script>

<style>
.el-table th.el-table__cell {
  background: lightgray;
}
</style>
